<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Editor</title>
</head>
<body>
<div id="editor"></div>
<div id="table" contenteditable="true"><tb-jumbotron style="background-image:url(&quot;https://www.tanboui.com/static/img/tbus-bg.49d7d956eb051d336e7f788f1b62eeb0.jpg&quot;);background-size:cover;background-position:center center"><h1 style="color:rgb(255, 255, 255);font-size:36px">Hello, world!</h1><p style="color:rgb(255, 255, 255)">我是 TBus 富文本编辑器，等你好久了，</p><p style="color:rgb(255, 255, 255)">快来发挥你的创造力吧！</p></tb-jumbotron><p>你也许在找一个既方便定制，又可以自由扩展的富文本编辑器？没错，你现在看到的就是。TBus 是一个基于组件的编辑器，你可以自由定制你想要的任意组件和效果，而不用关心富文本的底层实现。如果你觉得 TBus 默认提供的样式还不够非富，你一样可以自己扩展。总之，限制你的不是 TBus，而是你自己的想象力！</p><p>来看看当前 TBus 都有什么亮点：</p><ul><li>默认自带了足够<strong style="color:rgb(18, 150, 219)">丰富的工具</strong>，基本能满足大部分用户的需求；<br></li><li>原生支持<strong style="color:rgb(18, 150, 219)">组件化</strong>，可以<strong style="color:rgb(18, 150, 219)">任意定制</strong>自己的组件。默认自带了其它富文本较难实现的可编辑与不可编辑的功能；</li><li>强大的<strong style="color:rgb(18, 150, 219)">表格支持</strong>，你可<strong style="color:rgb(18, 150, 219)">批量操作</strong>单元格，并随意增加、删除表格内容，也可以修改表格的样式风格；</li><li><strong style="color:rgb(18, 150, 219)">实时代码高亮</strong>，其实不用 Markdown，一样可以写一份好的技术文档；</li><li>图片、视频等，自由的<strong style="color:rgb(18, 150, 219)">拖动缩放</strong>，不用再去找插件了；</li><li>丰富的组件库，伸手党也可以创造出不一样的文章。</li></ul><p>说了这么多，赶快运行起来，看一看效果：<br></p><pre lang="Typescript"><code><span style="color:#333;font-weight:bold">import</span>&nbsp;{ createEditor }&nbsp;<span style="color:#333;font-weight:bold">from</span>&nbsp;<span style="color:#d14">'@tanbo/tbus'</span>;<br><br><span style="color:#333;font-weight:bold">const</span>&nbsp;editor = createEditor(<span style="color:#0086b3">document</span>.getElementById(<span style="color:#d14">'editor'</span>));<br>editor.onChange.subscribe(() =&gt; {<br>&nbsp;&nbsp;<span style="color:#333;font-weight:bold">const</span>&nbsp;{contents, styleSheets} = editor.getContents();<br>&nbsp;&nbsp;<span style="color:#0086b3">console</span>.log(contents, styleSheets);<br>})<br></code></pre><p><br></p><p>你也许会好奇，TBus 到底是如何做到这么多功能的，这其实依赖于 TBus 底层的数据结构，我们来看一个表格，帮助你理解：</p><p><br></p><table><tbody><tr><td rowSpan="3" style="background-color:rgb(233, 234, 236);text-align:center"><strong style="color:rgb(28, 40, 56)">文字内容</strong><br></td><td colSpan="23"><u>你好，我是&nbsp;<strong>T</strong></u><strong>Bus 富<del>文本<em>编辑</em></del><em>器</em></strong><em>。你<u>还好</u></em><u>吗？</u><br></td></tr><tr><td style="background-color:rgb(73, 80, 96);text-align:center;border-color:rgb(28, 40, 56);"><span style="color:rgb(233, 234, 236);font-size:14px">0</span><br></td><td style="background-color:rgb(73, 80, 96);text-align:center;border-color:rgb(28, 40, 56);"><span style="color:rgb(233, 234, 236);font-size:14px">1</span><br></td><td style="background-color:rgb(73, 80, 96);text-align:center;border-color:rgb(28, 40, 56);"><span style="color:rgb(233, 234, 236);font-size:14px">2</span><br></td><td style="background-color:rgb(73, 80, 96);text-align:center;border-color:rgb(28, 40, 56);"><span style="color:rgb(233, 234, 236);font-size:14px">3</span><br></td><td style="background-color:rgb(73, 80, 96);text-align:center;border-color:rgb(28, 40, 56);"><span style="color:rgb(233, 234, 236);font-size:14px">4</span><br></td><td style="background-color:rgb(73, 80, 96);text-align:center;border-color:rgb(28, 40, 56);"><span style="color:rgb(233, 234, 236);font-size:14px">5</span><br></td><td style="background-color:rgb(73, 80, 96);text-align:center;border-color:rgb(28, 40, 56);"><span style="color:rgb(233, 234, 236);font-size:14px">6</span><br></td><td style="background-color:rgb(73, 80, 96);text-align:center;border-color:rgb(28, 40, 56);"><span style="color:rgb(233, 234, 236);font-size:14px">7</span><br></td><td style="background-color:rgb(73, 80, 96);text-align:center;border-color:rgb(28, 40, 56);"><span style="color:rgb(233, 234, 236);font-size:14px">8</span><br></td><td style="background-color:rgb(73, 80, 96);text-align:center;border-color:rgb(28, 40, 56);"><span style="color:rgb(233, 234, 236);font-size:14px">9</span><br></td><td style="background-color:rgb(73, 80, 96);text-align:center;border-color:rgb(28, 40, 56);"><span style="color:rgb(233, 234, 236);font-size:14px">10</span><br></td><td style="background-color:rgb(73, 80, 96);text-align:center;border-color:rgb(28, 40, 56);"><span style="color:rgb(233, 234, 236);font-size:14px">11</span><br></td><td style="background-color:rgb(73, 80, 96);text-align:center;border-color:rgb(28, 40, 56);"><span style="color:rgb(233, 234, 236);font-size:14px">12</span><br></td><td style="background-color:rgb(73, 80, 96);text-align:center;border-color:rgb(28, 40, 56);"><span style="color:rgb(233, 234, 236);font-size:14px">13</span><br></td><td style="background-color:rgb(73, 80, 96);text-align:center;border-color:rgb(28, 40, 56);"><span style="color:rgb(233, 234, 236);font-size:14px">14</span><br></td><td style="background-color:rgb(73, 80, 96);text-align:center;border-color:rgb(28, 40, 56);"><span style="color:rgb(233, 234, 236);font-size:14px">15</span><br></td><td style="background-color:rgb(73, 80, 96);text-align:center;border-color:rgb(28, 40, 56);"><span style="color:rgb(233, 234, 236);font-size:14px">16</span><br></td><td style="background-color:rgb(73, 80, 96);text-align:center;border-color:rgb(28, 40, 56);"><span style="color:rgb(233, 234, 236);font-size:14px">17</span><br></td><td style="background-color:rgb(73, 80, 96);text-align:center;border-color:rgb(28, 40, 56);"><span style="color:rgb(233, 234, 236);font-size:14px">18</span><br></td><td style="background-color:rgb(73, 80, 96);text-align:center;border-color:rgb(28, 40, 56);"><span style="color:rgb(233, 234, 236);font-size:14px">19</span><br></td><td style="background-color:rgb(73, 80, 96);text-align:center;border-color:rgb(28, 40, 56);"><span style="color:rgb(233, 234, 236);font-size:14px">20</span><br></td><td style="background-color:rgb(73, 80, 96);text-align:center;border-color:rgb(28, 40, 56);"><span style="color:rgb(233, 234, 236);font-size:14px">21</span><br></td><td style="background-color:rgb(73, 80, 96);text-align:center;border-color:rgb(28, 40, 56);"><span style="color:rgb(233, 234, 236);font-size:14px">22</span><br></td></tr><tr><td style="text-align:center">你<br></td><td style="text-align:center">好<br></td><td style="text-align:center">，<br></td><td style="text-align:center">我<br></td><td style="text-align:center">是<br></td><td style="text-align:center"><br></td><td style="text-align:center">T<br></td><td style="text-align:center">B<br></td><td style="text-align:center">u<br></td><td style="text-align:center">s<br></td><td style="text-align:center"><br></td><td style="text-align:center">富<br></td><td style="text-align:center">文<br></td><td style="text-align:center">本<br></td><td style="text-align:center">编<br></td><td style="text-align:center">辑<br></td><td style="text-align:center">器<br></td><td style="text-align:center">。<br></td><td style="text-align:center">你<br></td><td style="text-align:center">还<br></td><td style="text-align:center">好<br></td><td style="text-align:center">吗<br></td><td style="text-align:center">？<br></td></tr><tr><td style="background-color:rgb(233, 234, 236);text-align:center"><strong style="color:rgb(28, 40, 56)">加粗</strong><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td style="background-color:rgb(233, 234, 236);text-align:center"><strong style="color:rgb(28, 40, 56)">下划线</strong><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td></tr><tr><td style="background-color:rgb(233, 234, 236);text-align:center"><strong style="color:rgb(28, 40, 56)">斜体</strong><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td><br></td><td><br></td></tr><tr><td style="background-color:rgb(233, 234, 236);text-align:center"><strong style="color:rgb(28, 40, 56)">中划线</strong><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td style="background-color:rgb(221, 222, 225)"><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr></tbody></table><p><br></p><p>我们再来看看 TBus 中一些核心的概念：<br></p><tb-word-explain><div class="tb-word-explain-title-group"><h3 style="text-align:right" class="tb-word-explain-title">Component<br></h3><div style="text-align:right" class="tb-word-explain-subtitle">组件<br></div></div><div class="tb-word-explain-detail">TBus 的组件和传统 web 开发中的组件其实是差不多的，由一部分相对固定的模板和动态的插槽组成。<br></div></tb-word-explain><tb-word-explain><div class="tb-word-explain-title-group"><h3 style="text-align:right" class="tb-word-explain-title">ComponentReader<br></h3><div style="text-align:right" class="tb-word-explain-subtitle">组件转换器<br></div></div><div class="tb-word-explain-detail">用于把 DOM 树转换为 TBus 组件类的转换器。<br></div></tb-word-explain><tb-word-explain><div class="tb-word-explain-title-group"><h3 style="text-align:right" class="tb-word-explain-title">Fragment<br></h3><div style="text-align:right" class="tb-word-explain-subtitle">可编辑片段</div></div><div class="tb-word-explain-detail">一段可编辑的内容，可以是字符串或组件。同时，Fragment 还保存对应内容的样式。<br></div></tb-word-explain><tb-word-explain><div class="tb-word-explain-title-group"><h3 style="text-align:right" class="tb-word-explain-title">FormatMap</h3><div style="text-align:right" class="tb-word-explain-subtitle">格式地图<br></div></div><div class="tb-word-explain-detail">Fragment 对应的格式。<br></div></tb-word-explain><tb-word-explain><div class="tb-word-explain-title-group"><h3 style="text-align:right" class="tb-word-explain-title">Formatter<br></h3><div style="text-align:right" class="tb-word-explain-subtitle">格式化类</div></div><div class="tb-word-explain-detail">在输入时，用于读取 HTML 的样式。在输出时，用于渲染 Fragment 的样式并生成虚拟 DOM。<br></div></tb-word-explain><p>我们操作 TBus 设置格式，实际上是操作的这些数据。TBus 会根据这些数据，自动生成最优化的 DOM。如果你还期待更多的功能，我们目前正在开发的有这些：</p><blockquote><tb-todo-list><div class="tb-todo-list-item"><div class="tb-todo-list-btn"><span class="tb-todo-list-state tb-todo-list-state-active"></span></div><div class="tb-todo-list-content">时间轴组件</div></div><div class="tb-todo-list-item"><div class="tb-todo-list-btn"><span class="tb-todo-list-state"></span></div><div class="tb-todo-list-content">涂鸦板组件</div></div><div class="tb-todo-list-item"><div class="tb-todo-list-btn"><span class="tb-todo-list-state"></span></div><div class="tb-todo-list-content">公式编辑器组件</div></div><div class="tb-todo-list-item"><div class="tb-todo-list-btn"><span class="tb-todo-list-state"></span></div><div class="tb-todo-list-content">幻灯片组件<br></div></div></tb-todo-list></blockquote><p>你还可以加入我们的官方 QQ 群，和核心开发人员直接提出需求，我们会尽最大努力满足：</p><p style="text-align:center"><img src="https://www.tanboui.com/static/img/qq.5742a35c1bb13f0d9079f47221d70534.jpg" style="width:252px;height:auto"></p><p>好了，简单的介绍就到这里为止吧，希望你使用愉快！</p><p><br></p><p style="text-align:right">——TBus 开发团队</p><p style="text-align:right">2020 年 7 月 19 日<br></p>
</div>
<p>
  <button type="button" id="btn">destroy</button>
</p>
</body>
</html>

